<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8" %>
<%@page import="org.ipo.mm.web.util.pager.MeetingPager, org.ipo.mm.web.util.ConstantManager,
 java.util.Collection, org.ipo.mm.web.util.security.SecurityManager, java.util.Vector,
 org.ipo.mm.ejb.entities.Meeting,org.ipo.mm.ejb.entities.Representative,java.util.List,java.util.Iterator" %>
<%@taglib prefix="l" uri="http://struts.apache.org/tags-logic" %>
<%@taglib prefix="b" uri="http://struts.apache.org/tags-bean" %>
<%@taglib prefix="h" uri="http://struts.apache.org/tags-html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%String readOnlyStr = (String)session.getAttribute("readOnly");%>
	
			<script type="text/javascript" charset="utf-8">
			/* Custom filtering function which will filter data in column four between two values */
			$.fn.dataTableExt.afnFiltering.push(
				function( oSettings, aData, iDataIndex ) {
					var iMin = document.getElementById('dateFrom').value;
					var iMax = document.getElementById('dateTo').value;
					var iVersion = aData[3];
					if ( iMin == "" && iMax == "" )
					{
						return true;
					}
					else if ( iMin == "" && compareDates(iMax,iVersion)>=0 )
					{
						return true;
					}
					else if ( compareDates(iMin,iVersion)<=0 && "" == iMax )
					{
						return true;
					}
					else if ( compareDates(iMin,iVersion)<=0 && compareDates(iMax,iVersion)>=0)
					{
						return true;
					}
					return false;
				}
			);
			</script>
		
<%Collection<Integer> privileges = (Collection<Integer>) request.getSession().getAttribute(ConstantManager.SESSION_USER_PRIVILEGES);%>
		
<h1>
<% if (readOnlyStr.equals("true")) {%>
 <b:message key="meetings_show_read_mode"/>
<%}else{%>
 <b:message key="meetings_show_edit_mode"/>
<%}%>                     
</h1>

<!--advanced search form -->
<a class="detailSearch" onclick="switchMenu('searchPanelMeeting');" href="#"><b:message key="gen_advanced_search"/></a>
<div id="searchPanelMeeting">
    <br>
    <h:form  styleId="form3" action="/protected/meeting_search?&clearStack=true">
        <div style="clear:none">
            <div class="detailSearchForm" >
                <em><strong><b:message key="meetings_search_meeting_details"/></strong></em><br />

                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><b:message key="meetings_event_name"/></td>
                        <td>

                            <h:text property="meetingNameFilter" styleId="name" styleClass="filter" />

                            <h:select property="meetingNameOperator">
                                <h:option value="AND">AND</h:option>
                                <h:option value="OR">OR</h:option>
                            </h:select>

                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="meetings_venue"/></td>
                        <td><h:text property="venueFilter" styleClass="filter"/>
                            <h:select property="venueOperator">
                                <h:option value="AND">AND</h:option>
                                <h:option value="OR">OR</h:option>
                            </h:select>

                        </td>
                    </tr>                    
                    <tr>
                        <td><b:message key="meetings_minutes"/></td>
                        <td>
                            <h:text property="conclusionsFilter"  styleClass="filter"/>

                            <h:select property="conclusionsOperator" styleId="conclusionsClause">
                                <h:option value="AND">AND</h:option>
                                <h:option value="OR">OR</h:option>
                            </h:select>

                        </td>
                    </tr>                    
                    <tr>
                        <td><b:message key="meetings_interval"/></td>
                        <td>
                            <div id="cont"></div>
                            <div id="info" style="text-align: center; margin-top: 1em;"><b:message key="meetings_select_interval_start"/></div>
                            <h:hidden property="dateIntervalStart" styleId="dateIntervalStart"/>
                            <h:hidden property="dateIntervalEnd" styleId="dateIntervalEnd"/>

                            <script type="text/javascript">//<![CDATA[

                                var SELECTED_RANGE = null;
                                function getSelectionHandler() {
                                    var startDate = null;
                                    var ignoreEvent = false;
                                    return function(cal) {
                                        var selectionObject = cal.selection;

                                        // avoid recursion, since selectRange triggers onSelect
                                        if (ignoreEvent)
                                            return;

                                        var selectedDate = selectionObject.get();
                                        if (startDate == null) {
                                            startDate = selectedDate;
                                            SELECTED_RANGE = null;
                                            document.getElementById("info").innerHTML = "<b:message key="meetings_select_interval_end"/>";
                                            document.getElementById("dateIntervalStart").value = Calendar.printDate(Calendar.intToDate(startDate), "%Y-%m-%d");
                                            // comment out the following two lines and the ones marked (*) in the else branch
                                            // if you wish to allow selection of an older date (will still select range)
                                            cal.args.min = Calendar.intToDate(selectedDate);
                                            cal.refresh();
                                        } else {
                                            ignoreEvent = true;
                                            selectionObject.selectRange(startDate, selectedDate);
                                            ignoreEvent = false;
                                            SELECTED_RANGE = selectionObject.sel[0];

                                            // alert(SELECTED_RANGE.toSource());
                                            //
                                            // here SELECTED_RANGE contains two integer numbers: start date and end date.
                                            // you can get JS Date objects from them using Calendar.intToDate(number)

                                            startDate = null;

                                            document.getElementById("info").innerHTML = selectionObject.print("%d/%m/%Y") +
                                                "<br><b:message key="meetings_select_interval_start_again"/>";
                                            document.getElementById("dateIntervalEnd").value = Calendar.printDate(Calendar.intToDate(selectedDate), "%Y-%m-%d");

                                            // (*)
                                            cal.args.min = null;
                                            cal.refresh();

                                        }
                                    };
                                };

                                Calendar.setup({
                                    cont          : "cont",
                                    fdow          : 1,
                                    selectionType : Calendar.SEL_SINGLE,
                                    onSelect      : getSelectionHandler()
                                });

                                //]]></script>
                        </td>
                    </tr>
                </table>
                <br />
                <br />

                <br />
                <script type="text/javascript">//<![CDATA[

                    var cal = Calendar.setup({
                        onSelect: function(cal) { cal.hide() },
                        showTime     : 24,
                        minuteStep  : 15

                    });
                    cal.manageFields("txt_field", "txt_field", "%d/%m/%Y %H:%M");

                    //]]></script>


            </div>
            <div class="detailSearchForm">
                <em><strong><b:message key="gen_search_organizer_label"/></strong></em><br />
                <table border="0" cellspacing="0" cellpadding<b:message key="meetings_select_interval_start_again"/>="0">
                    <tr>
                        <td><b:message key="repr_name"/></td>
                        <td>
                            <h:text property="orgNameFilter" styleClass="filter" styleId="organizerName"/>

                            <h:select property="orgNameOperator">
                                <h:option value="AND">AND</h:option>
                                <h:option value="OR">OR</h:option>
                            </h:select>


                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst"/></td>
                        <td>

                            <h:select property="orgInstitutionFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="inst" name="search_institutions">
                                    <h:option value="${inst.id}">${inst.name}</h:option>
                                </l:iterate>
                            </h:select>

                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_type"/></td>
                        <td>

                            <h:select property="orgITypeFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="type" name="search_types">
                                    <h:option value="${type.id}">${type.name}</h:option>
                                </l:iterate>
                            </h:select>

                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_region"/></td>
                        <td>

                            <h:select property="orgIRegionFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="region" name="search_regions">
                                    <h:option value="${region.id}">${region.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>

                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_family"/></td>
                        <td>


                            <h:select property="orgIFamilyFilter" size="5" multiple="true" styleClass="list" >

                                <l:iterate id="family" name="search_families">
                                    <h:option value="${family.id}">${family.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>

                    </tr>

                    <tr>
                        <td><b:message key="repr_inst_city"/></td>
                        <td>
                            <h:select property="orgICityFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="city" name="search_cities">
                                    <h:option value="${city.id}">${city.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>

                    </tr>

                </table>
            </div>
            <div class="detailSearchForm">
                <em><strong><b:message key="gen_search_representative_label"/></strong></em><br />
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><b:message key="repr_name"/></td>
                        <td>


                            <h:text property="repNameFilter" styleClass="filter" />
                            <h:select property="repNameOperator">
                                <h:option value="AND">AND</h:option>
                                <h:option value="OR">OR</h:option>
                            </h:select>
                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst"/></td>

                        <td>
                            <h:select property="repInstitutionFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="inst" name="search_institutions">
                                    <h:option value="${inst.id}">${inst.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_type"/></td>
                        <td>
                            <h:select property="repITypeFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="type" name="search_types">
                                    <h:option value="${type.id}">${type.name}</h:option>
                                </l:iterate>
                            </h:select>

                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_region"/></td>
                        <td>
                            <h:select property="repIRegionFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="region" name="search_regions">
                                    <h:option value="${region.id}">${region.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_family"/></td>
                        <td>
                            <h:select property="repIFamilyFilter" size="5" multiple="true" styleClass="list" >

                                <l:iterate id="family" name="search_families">
                                    <h:option value="${family.id}">${family.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>
                    </tr>
                    <tr>
                        <td><b:message key="repr_inst_city"/></td>
                        <td>
                            <h:select property="repICityFilter" size="5" multiple="true" styleClass="list" >
                                <l:iterate id="city" name="search_cities">
                                    <h:option value="${city.id}">${city.name}</h:option>
                                </l:iterate>
                            </h:select>
                        </td>

                    </tr>

                </table>
            </div>
        </div>
        <span style="clear:left"><b:message key="gen_search_order_label"/> <h:select property="orderByClause">
                <h:option value="1"><b:message key="gen_search_order_newest_first"/></h:option>
                <h:option value="2"><b:message key="gen_search_order_oldest_first"/></h:option>
            </h:select>
            <h:submit><b:message key="gen_search"/></h:submit></span>
        </h:form>
</div>

<div id="dateRange" class="display">
<table>
<tr>
<td><label for="dateFrom"><b:message key="meetings_select_interval_start"/> (dd/mm/yyyy)</label></td>
<td><input type="text" name="dateFrom" id="dateFrom"/></td>
<td><button type="button" class="button" id="dateFromButton">...</button></td>
                       <script type="text/javascript">
                           var cal = Calendar.setup({
                               onSelect: function(cal) { 
							   tableMeetings.fnDraw(); 
							   cal.hide(); 
							   },
                               selectionType : Calendar.SEL_SINGLE
                           });
                           cal.manageFields("dateFromButton", "dateFrom", "%d/%m/%Y");
                           </script>
<td>
<button type="button" class="button" id="dateFromButton" 
onclick="document.getElementById('dateFrom').value='';tableMeetings.fnDraw();">X
</button>
</td>
</tr>
<tr>
<td><label for="dateTo"><b:message key="meetings_select_interval_end"/> (dd/mm/yyyy)</label></td>
<td><input type="text" name="dateTo" id="dateTo"/></td>
<td><button type="button" class="button" id="dateToButton">...</button></td>
                       <script type="text/javascript">
                           var cal = Calendar.setup({
                               onSelect: function(cal) { 
							   tableMeetings.fnDraw(); 
							   cal.hide(); 
							   },
                               selectionType : Calendar.SEL_SINGLE
                           });
                           cal.manageFields("dateToButton", "dateTo", "%d/%m/%Y");
                           </script>
<td>
<button type="button" class="button" id="dateFromButton" 
onclick="document.getElementById('dateTo').value='';tableMeetings.fnDraw();">X
</button>
</td>
<tr>
</table>

</div>


<div>
    <table id="meetingsTable" class="display">
      <thead>
		<tr>
            <th scope="col"><b:message key="meetings_event_name"/></th>
            <th scope="col"><b:message key="meetings_organizer"/></th>
            <th scope="col"><b:message key="meetings_organizer"/><br/><b:message key="meetings_institution"/></th>
            <th scope="col"><b:message key="meetings_date"/></th>
			<th scope="col"><b:message key="meetings_date_start_time"/> - <b:message key="meetings_date_end_time"/></th>         
			<th scope="col"><b:message key="meetings_venue"/></th>
			<th scope="col"><b:message key="meetings_participants"/></th>
			<th scope="col"><b:message key="meetings_participants"/><br/><b:message key="menu_institutions"/></th>			
            <th scope="col"><b:message key="meetings_draft_status"/></th>
        </tr>
		</thead>
		  <tfoot>
		<tr>
		<!--
            <th scope="col"><b:message key="meetings_event_name"/></th>
            <th scope="col"><b:message key="meetings_organizer"/></th>
            <th scope="col"><b:message key="meetings_organizer"/><br/><b:message key="meetings_institution"/></th>
            <th scope="col"><b:message key="meetings_date"/></th>
            <th scope="col"><b:message key="meetings_venue"/></th>
            <th scope="col"><b:message key="meetings_participants"/></th>
			<th scope="col"><b:message key="meetings_participants"/><br/><b:message key="menu_institutions"/></th>
			<th scope="col"><b:message key="meetings_draft_status"/></th>
				-->
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name=""  value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			<th><input type="text" name="" value="" class="search_init" /></th>
			
        </tr>
		</tfoot>
<tbody>
<l:iterate id="meeting" name="MEETING_SEARCH_RESULTS" scope="request">
<tr>
<td>
<%if (readOnlyStr.equals("false")) {%>
		<c:choose>
		<c:when test="${(meeting.user == USER && meeting.draft == true) || USER.type == USER_TYPE_ADMIN_PA}">
		<h:link	action="/protected/dispatch?method=showUpdateMeetingForm&rf=true"
                paramId="mid" paramName="meeting" paramProperty="id">			
			<b:write name="meeting" property="eventName"/>
        </h:link>
		
		</c:when>
		<c:otherwise>
		<script type="text/javascript">
		var readOnly="false";
		editing = false;
		</script>

				<a onclick="getHtmlAjax('<%= request.getContextPath()%>/protected/dispatch.do?method=showUpdateMeetingForm&rf=true&mid=${meeting.id}','#meetingDialog','#meetingForm');" class="expand">
				
		<b:write name="meeting" property="eventName"/>
		</a>
		</c:otherwise>
		</c:choose>
<% } else{ %>
		<a onclick="getHtmlAjax('<%= request.getContextPath()%>/protected/dispatch.do?method=viewMeetingForm&rf=true&mid=${meeting.id}','#meetingDialog','#meetingForm');" class="expand">
	<b:write name="meeting" property="eventName"/>
	</a>
	<%}%>
</td>

<td><span>${meeting.organizer.firstName} ${meeting.organizer.lastName}</span></a>
</td>
<td><span>${meeting.organizer.institution.name}</span></td>
<td><b:write name="meeting" property="date" format="dd/MM/yyyy"/></td>
<td><span><b:write name="meeting" property="startTime"/> - <b:write name="meeting" property="endTime"/></span></td>
<td><span><b:write name="meeting" property="venue"/></span></td>
<td>
<p id=repCountMid${meeting.id} class="link" onclick="$('#reprsMid${meeting.id}').dialog('open')">${meeting.representativeCollection.size()}</p>
<div id='reprsMid${meeting.id}' class='dialog' title='<b:write name="meeting" property="eventName"/><br/><b:message key="meetings_participants"/>:'>
<c:forEach var="rep" items="${meeting.representativeCollection}" varStatus="rowCounter">
  <c:out value="${rowCounter.count}" />. ${rep.firstName} ${rep.lastName} <br/>
</c:forEach>
</div>
</td>
<td>
<p id="repInstCountMid${meeting.id}" class="link" 
onclick="$('#reprsInstMid${meeting.id}').dialog('open')">${meeting.representativeCollection.size()}</p>
<div id='reprsInstMid${meeting.id}' class='dialog'
title='<b:write name="meeting" property="eventName"/><br/><b:message key="meetings_participants"/> <b:message key="menu_institutions"/>:'>
<c:forEach var="rep" items="${meeting.representativeCollection}" varStatus="rowCounter">
  <c:out value="${rowCounter.count}" />. ${rep.institution.name} <br/>
</c:forEach>
</div>
</td>
<td>
	<c:if test="${meeting.draft == true}">
    <span style="color: red"><b:message key="meetings_draft"/></span>
    </c:if>
    <c:if test="${meeting.draft == false}">
    <span ><b:message key="meetings_completed"/></span>
    </c:if>
</td>
</tr>
</l:iterate>
</tbody>
</table>

</div>

<div id="meetingDialog" class="dialog"></div>

<!--

<% 
Collection<Meeting> meetings = (Collection<Meeting>)(request.getAttribute("MEETING_SEARCH_RESULTS"));

%>
<script type="text/javascript">
var noMe = <%=meetings.size()%>;
alert(noMe);
</script>

<% for (Iterator<Meeting> it = meetings.iterator(); it.hasNext();) {
            Meeting m = it.next();
      %>
	 
			<br/>
			value Meeting id = <%=m.getId()%>
			<br/>
			<%
			
			for (Iterator<Representative> rit = m.getRepresentativeCollection().iterator(); rit.hasNext();) {
				Representative rep = rit.next();
            %>
			repr = <%=rep.getFirstName()%> <%=rep.getLastName()%> - <%=rep.getInstitution().getName()%>
			
			<%}			
}%>		
-->


<script type="text/javascript">
function cancelForm(){
	$(".dialog").dialog('close');
}


 </script>